import styled from 'styled-components'
import style from '@/assets/global-style'

export const SliderContainer = styled.div`
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: auto;
background: white;
.before {
position: absolute;
top: -300px;
height: 400px;
width: 100%;
background: ${style['theme-color']};
z-index: 1;
}
.slider-container {
 position: relative;
width: 98%;
height: 8rem;
overflow: hidden;
margin: auto;
border-radius: 0.3rem;
.slider-nav {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.swipe-pagination-bullet-active {
background: ${style['theme-color']};
}
}
`